---
title: 'Instalación'
description: 'How to install Million.js into your React project'
---

import { Callout, Tabs, Tab, Steps } from 'nextra-theme-docs';

# Instalación

Million.js asume que ya tienes un proyecto React existente. Para obtener información sobre cómo crear una aplicación con React, consulta la [documentación de React](https://react.dev).

## Instalación via CLI

La interfaz de línea de comandos (CLI) de Million.js instalará automáticamente el paquete y configurará tu proyecto por ti.

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-manager">
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  npx million@latest
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  pnpx million@latest
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  yarn add million@latest
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  bunx million@latest
  ```
  </Tab>
</Tabs>


<Callout type="info">
Million.js es compatible con React 16 y versiones posteriores. Si estás utilizando una versión más antigua de React, deberás realizar una actualización primero.

También deberá asegurarse de tener Node.js 18 y superior.
</Callout>

¡Eso es todo! Tu proyecto ahora está en funcionamiento con Million.js 🎉

## Instalar manualmente

Si encuentras problemas al [instalar a través de la CLI](#install-via-cli), o si tienes una configuración personalizada, puedes instalar Million.js manualmente.

Ten en cuenta que hay dos modos entre los que puedes elegir: **Automático** y **Manual**:

- El **modo automático** configurará, analizará y optimizará automáticamente tu proyecto por ti. Este es el modo recomendado.

- El **modo Manual** requerirá que escribas código para [optimizar ciertas partes de tu proyecto](/docs/manual-mode/manual-mode).
Este modo es recomendado para usuarios avanzados que deseen tener un mayor control sobre su proyecto.

<Tabs items={['Automatic', 'Manual']} storageKey="mode">

<Tab>

<Steps>

### Instala Million.js

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  npm install million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  pnpm install million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  yarn add million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  bun add million
  ```
  </Tab>
</Tabs>

### Agrega el compilador a tu aplicación

<Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite','Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
<Tab>

Million.js es compatible dentro de los directorios `/app` (solo componentes "use client") y `/pages`.

```js filename="next.config.mjs"
import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

const millionConfig = {
  auto: true,// Si estas usando RSC: auto: { rsc: true },
};

export default million.next(nextConfig, millionConfig);
```
</Tab>

<Tab>
```js filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
   vite: {
     plugins: [million.vite({ mode: "react", server: true, auto: true })],
   },
});
```
</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true, auto: true })],
  });
};
```
</Tab>

<Tab>
```js filename="vite.config.js"
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), react()],
});
```
</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite({ auto: true }), remix()],
});
```
</Tab>

<Tab>
  <Callout type="warning">
    Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder.
  </Callout>

```js filename="craco.config.js"
const million = require("million/compiler");

module.exports = {
  webpack: {
    plugins: { add: [million.webpack({ auto: true })] },
  },
};
```
</Tab>

<Tab>
```js filename="webpack.config.js"
const million = require("million/compiler");
module.exports = {
  plugins: [million.webpack({ auto: true })],
};
```
</Tab>

<Tab>
```js filename="rollup.config.js"
import million from "million/compiler";

export default {
  plugins: [million.rollup({ auto: true })],
};
```
</Tab>
</Tabs>

</Steps>
</Tab>



<Tab>

<Steps>

### Instala Million.js


<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} storageKey="selected-pkg-manager">
{/* prettier-ignore */}
<Tab>
```bash copy
npm install million
```

  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  pnpm install million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  yarn add million
  ```
  </Tab>
  {/* prettier-ignore */}
  <Tab>
  ```bash copy
  bun add million
  ```
  </Tab>
</Tabs>

### Agrega el compilador a tu aplicación

<Tabs items={['Next.js', 'Astro', 'Gatsby', 'Vite', 'Remix', 'Create React App', 'Webpack', 'Rollup']} storageKey="selected-bundler-compiler">
<Tab>

Million.js es compatible dentro de los directorios `/app` (solo componentes "use client") y `/pages`.

```js filename="next.config.mjs"
import million from "million/compiler";

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
};

export default million.next(nextConfig);
```
</Tab>

<Tab>
```js filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import million from "million/compiler";

export default defineConfig({
  vite: {
    plugins: [million.vite({ mode: "react", server: true })],
  },
});
```
</Tab>

<Tab>
```js filename="gatsby-node.js"
const million = require("million/compiler");

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    plugins: [million.webpack({ mode: "react", server: true })],
  });
};
```
</Tab>

<Tab>
```js filename="vite.config.js"
import million from "million/compiler";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), react()],
});
```
</Tab>

<Tab>
```js filename="vite.config.js"
import { unstable_vitePlugin as remix } from "@remix-run/dev";
import million from "million/compiler";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [million.vite(), remix()],
});
```
</Tab>

<Tab>
<Callout type="warning">
  Si estas usando [Create React App (CRA)](https://create-react-app.dev/), necesitaras [configurar Craco](https://craco.js.org/docs/getting-started/) antes de proceder.
</Callout>
```js filename="craco.config.js"
const million = require("million/compiler");
module.exports = {
  webpack: {
    plugins: { add: [million.webpack()] },
  },
};
```
</Tab>

<Tab>
```js filename="webpack.config.js"
const million = require("million/compiler");
module.exports = {
  plugins: [million.webpack()],
};
```
</Tab>

<Tab>
```js filename="rollup.config.js"
import million from "million/compiler";

export default {
  plugins: [million.rollup()],
};
```
</Tab>

</Tabs>

</Steps>

</Tab>

</Tabs>
